<template>
  <div>
    <div v-for="item in orders" class="order_main">
      <div class="order_head">
        <span>订单编号:{{item[0].order_id}}</span>
        <span>订单时间:{{item[0].order_time|dataForm}}</span>
      </div>
      <div class="order_center">
        <table style="width: 100%;text-align: center;">
          <tr>
            <td></td>
            <td>商品名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
          <tr v-for="it in item">
            <td>
              <img
                :src="'http://106.15.179.105:3000/'+it.product_picture"
                alt
                style="width: 120px;"
              />
            </td>
            <td @click="goDetail(it.product_id)">{{it.product_name}}</td>
            <td>{{it.product_price}}元</td>
            <td>{{it.product_num}}</td>
            <td style="color: #FF6700;">{{it.product_price*it.product_num}}元</td>
          </tr>
        </table>
      </div>
      <div class="order_foot">
        <span>
          共
          <span style="color: #FF6700;">{{item[0].allNum}}</span>件商品
        </span>
        <span style="color: #FF6700;">
          合计:
          <span style="font-size: 24px;">{{item[0].allPrice}}元</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "";
export default {
  data() {
    return {
      orders: [
        [
          {
            id: 3745,
            order_id: 29091618793789096,
            user_id: 2909,
            product_id: 3,
            product_num: 7,
            product_price: 2599,
            order_time: 1618793789098,
            product_name: "小米CC9 Pro",
            product_picture: "public/imgs/phone/Mi-CC9.png"
          },
          {
            id: 3746,
            order_id: 29091618793789096,
            user_id: 2909,
            product_id: 2,
            product_num: 3,
            product_price: 2599,
            order_time: 1618793789098,
            product_name: "Redmi K30 5G",
            product_picture: "public/imgs/phone/Redmi-k30-5G.png"
          }
        ],
        [
          {
            id: 3742,
            order_id: 29091618793305920,
            user_id: 2909,
            product_id: 2,
            product_num: 5,
            product_price: 2599,
            order_time: 1618793305922,
            product_name: "Redmi K30 5G",
            product_picture: "public/imgs/phone/Redmi-k30-5G.png"
          },
          {
            id: 3743,
            order_id: 29091618793305920,
            user_id: 2909,
            product_id: 4,
            product_num: 4,
            product_price: 699,
            order_time: 1618793305922,
            product_name: "Redmi 8",
            product_picture: "public/imgs/phone/Redmi-8.png"
          },
          {
            id: 3744,
            order_id: 29091618793305920,
            user_id: 2909,
            product_id: 11,
            product_num: 2,
            product_price: 2799,
            order_time: 1618793305922,
            product_name: "小米全面屏电视E65A",
            product_picture: "public/imgs/appliance/MiTv-E65A.png"
          }
        ],
        [
          {
            id: 3661,
            order_id: 29091618555494770,
            user_id: 2909,
            product_id: 16,
            product_num: 1,
            product_price: 2599,
            order_time: 1618555494768,
            product_name: "米家互联网空调C1（一级能效）",
            product_picture: "public/imgs/appliance/AirCondition-V1C1.png"
          }
        ],
        [
          {
            id: 3659,
            order_id: 29091618555408096,
            user_id: 2909,
            product_id: 2,
            product_num: 1,
            product_price: 2599,
            order_time: 1618555408096,
            product_name: "Redmi K30 5G",
            product_picture: "public/imgs/phone/Redmi-k30-5G.png"
          },
          {
            id: 3660,
            order_id: 29091618555408096,
            user_id: 2909,
            product_id: 4,
            product_num: 2,
            product_price: 699,
            order_time: 1618555408096,
            product_name: "Redmi 8",
            product_picture: "public/imgs/phone/Redmi-8.png"
          }
        ]
      ]
    };
  },
  activated() {
    this.getOrder();
    this.getNum();
  },
  methods: {
    async getOrder() {
      console.log(this.$store.state.user_id);
      let { data: res } = await orderApi.getOrder({
        user_id: this.$store.state.user_id
      });
      console.log(res);
    },
    goDetail(id) {
      this.$router.push("/detail?productID=" + id);
    },
    getNum() {
      this.orders.forEach(item => {
        item.forEach(it => {
          let allNum = 0;
          let allPrice = 0;
          allNum += it.product_num;
          allPrice += it.product_num * it.product_price;
          it.allNum = allNum;
          it.allPrice = allPrice;
        });
      });
    }
  }
};
</script>

<style >
.order_main {
  width: 1225px;
  margin: 20px auto;
  background-color: white;
}
.order_head {
  display: flex;
  justify-content: space-between;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  border-bottom: solid 2px #ff6700;
}
td {
  width: 20%;
}
.order_center {
  padding: 20px 0;
  border-bottom: solid 2px #ff6700;
}
.order_foot {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
}
</style>